<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img_class {
            width: 300px;
            height: 300px;
            border: black 1px solid;
            background-color: darkgrey;
        }

        .one_class {
            object-fit: fill;
        }

        .two_class {
            object-fit: contain;
            object-position: left 0px bottom 100px;
        }

        .three_class {
            object-fit: cover;
        }

        .four_class {
            object-fit: none;
            object-position: left 100px bottom 100px;
        }

        .div_class {
            width: 350px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="div_class">
        <span>未加object-fit属性时</span>
        <img class="img_class"
            src="https://img-blog.csdnimg.cn/20190902133903654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz,size_16,color_FFFFFF,t_70">
    </div>
    <div class="div_class">
        <span>object-fit:fill</span>
        <img class="img_class one_class"
            src="https://img-blog.csdnimg.cn/20190902133903654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz,size_16,color_FFFFFF,t_70">
    </div>
    <div class="div_class ">
        <span>object-fit: contain;</span>
        <p>object-position: left 0px bottom 100px;</p>
        <img class="img_class two_class"
            src="https://img-blog.csdnimg.cn/20190902133903654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz,size_16,color_FFFFFF,t_70">
    </div>
    <div class="div_class">
        <span>object-fit: cover;</span>
        <img class="img_class three_class"
            src="https://img-blog.csdnimg.cn/20190902133903654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz,size_16,color_FFFFFF,t_70">
    </div>
    <div class="div_class">
        <span> object-fit: none;</span>
        <p>object-position: left 100px bottom 100px;</p>
        <img class="img_class four_class"
            src="https://img-blog.csdnimg.cn/20190902133903654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz,size_16,color_FFFFFF,t_70">
    </div>
</body>

</html>